<template>
	<div>
		<div class="circle" style="width: 400px;margin: auto;height: 400px;"></div>
		<div class="cake" style="width: 400px;margin: auto;height: 400px;"></div>
	</div>
</template>


<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import * as echarts from 'echarts';
export default defineComponent({
	setup() {
		// 基于准备好的dom，初始化echarts实例

		onMounted(() => {
			var myChart = echarts.init(document.querySelector('.circle') as HTMLElement);
			var myChart1 = echarts.init(document.querySelector('.cake') as HTMLElement);

			myChart1.setOption({
				legend: {
					top: 'bottom'
				},
				toolbox: {
					show: true,
					feature: {
						mark: { show: true },
						dataView: { show: true, readOnly: false },
						restore: { show: true },
						saveAsImage: { show: true }
					}
				},
				series: [
					{
						name: 'Nightingale Chart',
						type: 'pie',
						radius: [50, 250],
						center: ['50%', '50%'],
						roseType: 'area',
						itemStyle: {
							borderRadius: 8
						},
						data: [
							{ value: 40, name: 'rose 1' },
							{ value: 38, name: 'rose 2' },
							{ value: 32, name: 'rose 3' },
							{ value: 30, name: 'rose 4' },
							{ value: 28, name: 'rose 5' },
							{ value: 26, name: 'rose 6' },
							{ value: 22, name: 'rose 7' },
							{ value: 18, name: 'rose 8' }
						]
					}
				]
			})

		// 绘制图表 的柱状图
		myChart.setOption({
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [
				{
					data: [120, 200, 150, 80, 70, 110, 130],
					type: 'bar',
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					}
				}
			]
		});

	})


	},
})
</script>
